<!--设备管理板块-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">基础信息维护</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="text-align: center">
            <div>
              <el-button @click="baseType(1)" v-if="usePower===1" style="margin-top: 10px;width: 100%">用户权限调整</el-button>
            </div>
            <div>
              <el-button @click="baseType(2)" v-if="usePower===1 || usePower===2" style="margin-top: 10px;width: 100%">零部件维护</el-button>
            </div>
          </div>

        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main>
            <div style="text-align: right">
              <el-button @click="insertType(1)">点击插入</el-button>
              <hr>
              <div v-if="baseTypeUse===1" style="height: 65vh; overflow-y:auto">
                <el-table
                    :data="baseUser"
                    border
                    style="width: 100%">
                  <el-table-column
                      prop="userName"
                      label="用户工号"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="password"
                      label="户的密码"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="用户姓名">
                  </el-table-column>
                  <el-table-column
                      prop="problemManagement"
                      label="质量问题管理页">
                  </el-table-column>
                  <el-table-column
                      prop="pokayoke"
                      label="防错管理页">
                  </el-table-column>
                  <el-table-column
                      prop="equipmentMaintain"
                      label="设备维保管理页">
                  </el-table-column>
                  <el-table-column
                      prop="changeModel"
                      label="低频作业指导书页面">
                  </el-table-column>
                  <el-table-column
                      prop="base"
                      label="基础信息页">
                  </el-table-column>
                  <el-table-column
                      label="编辑"
                      v-slot:default="scope">
                    <el-link @click="editType(1,scope)">编辑</el-link>
                    <el-link style="margin-left:10px ">删除</el-link>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="baseTypeUse===2" style="height: 65vh; overflow-y:auto">
                <el-table
                    :data="baseComponent"
                    border
                    style="width: 100%">
                  <el-table-column
                      prop="partNumber"
                      label="零部件图号"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="partName"
                      label="零部件名称"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="partModel"
                      label="适用机型">
                  </el-table-column>
                  <el-table-column
                      prop="supplier"
                      label="供应商名称">
                  </el-table-column>
                  <el-table-column
                      prop="sortIndex"
                      label="排序">
                  </el-table-column>
                  <el-table-column
                      label="编辑"
                      v-slot:default="scope">
                    <el-link @click="editType(1,scope)">编辑</el-link>
                    <el-link style="margin-left:10px ">删除</el-link>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--编辑零部件信息的弹框-->
    <el-dialog
        :title="titleMessage"
        :visible.sync="dialogBaseComponent"
        width="30%"
        :before-close="handleClose">
      <div style="text-align: left; margin-top: 10px">
        <span style="font-size: 18px;color: red;">零部件图号：</span>
        <el-input v-model="input1" style="margin-top: 5px"></el-input>
      </div>
      <div style="text-align: left; margin-top: 10px">
        <span style="font-size: 18px;color: red;">零部件名称：</span>
        <el-input v-model="input2" style="margin-top: 5px"></el-input>
      </div>
      <div style="text-align: left;margin-top: 10px">
        <span style="font-size: 18px;color: red;">适用机型：</span>
        <el-input v-model="input3" style="margin-top: 5px"></el-input>
      </div>
      <div style="text-align: left; margin-top: 10px">
        <span style="font-size: 18px;color: red;">供应商名称：</span>
        <el-input v-model="input4" style="margin-top: 5px"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogBaseComponent = false">取 消</el-button>
    <el-button type="primary" @click="submitType">确 定</el-button>
  </span>
    </el-dialog>
    <!--编辑用户基本权限的页面-->
    <el-dialog
        :title="titleMessage"
        :visible.sync="dialogBaseUser"
        width="30%"
        :before-close="handleClose">
      <div style="text-align: left; margin-top: 10px">
        <span style="font-size: 18px;color: red;">用户工号：</span>
        <el-input v-model="input1" style="margin-top: 5px"></el-input>
      </div>
      <div style="text-align: left; margin-top: 10px">
        <span style="font-size: 18px;color: red;">用户密码：</span>
        <el-input v-model="input2" style="margin-top: 5px"></el-input>
      </div>
      <div style="text-align: left;margin-top: 10px">
        <span style="font-size: 18px;color: red;">用户姓名：</span>
        <el-input v-model="input3" style="margin-top: 5px"></el-input>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
        <span style="font-size: 18px;color: red;">基础信息管理页：</span>
        <el-input-number v-model="input4" style="margin-left: 10px;"></el-input-number>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
        <span style="font-size: 18px;color: red;">防错管理页：</span>
        <el-input-number v-model="input5" style="margin-left: 10px;"></el-input-number>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
        <span style="font-size: 18px;color: red;">设备维保管理页：</span>
        <el-input-number v-model="input6" style="margin-left: 10px;"></el-input-number>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
        <span style="font-size: 18px;color: red;">质量问题管理页：</span>
        <el-input-number v-model="input7" style="margin-left: 10px;"></el-input-number>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
        <span style="font-size: 18px;color: red;">低频作业指导书：</span>
        <el-input-number v-model="input8" style="margin-left: 10px;"></el-input-number>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogBaseUser = false">取 消</el-button>
    <el-button type="primary" @click="submitType">确 定</el-button>
  </span>
    </el-dialog>

    <!--抽屉放置区域-->
  </div>
</template>

<script>

import _ from "lodash";

export default {
  name: "baseInformation",
  components: {},
  data() {
    return {
      //用户权限相关的变量：用户如果是1：是可以编辑所有的；2:只能编辑零部件清单
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限


      //用户权限修改也
      baseUser:[
        {//记录用户数据表中的ID
          id: '',
          //记录用户数据表中的用户工号
          userName: '',
          //记录用户的密码
          password: '',
          //记录用户姓名
          name: '',
          //记录质量问题管理页的权限
          problemManagement: '',
          //记录防错管理页的权限
          pokayoke: '',
          //记录设备维保管理页面权限
          equipmentMaintain: '',
          //记录低频要领书的管理页面权限
          changeModel:'',
          //记录编辑基础信息页面的权限
          base: '',
        }
      ],
      //零部件明细表
      baseComponent:[
        {
          id: '',
          //零部件图号
          partNumber:'',
          //零部件名称
          partName:'',
          //适用机型
          partModel:'',
          //记录供应商名称
          supplier:'',
          //排序索引
          sortIndex:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
      ],
      //控件上用到的变量
      //记录用户选择在编辑那个基本的变量：1：编辑外购零部件的基本信息
      baseTypeUse:'',
      //编辑某一个对象的时候，用到的临时中转的变量
      tempEdit:{},
      //用户点击了哪一行，这一行在大表中的索引值是多少
      dataIndex:'',
      //用户点击了哪一行，这一行对应的数据库ID是多少
      dataId:'',
      //编辑中，用到的输入框的绑定变量
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      input5:'',
      input6:'',
      input7:'',
      input8:'',//低频作业指导书管理


      //弹窗用到的变量
      //编辑零部件信息的弹窗
      dialogBaseComponent:false,
      //编辑用户信息的弹窗
      dialogBaseUser:false,
      titleMessage:'提示',
    }
  },
  watch: {},
  methods: {
    //弹窗关闭时调用的函数
    handleClose(done) {
      this.$confirm('确认关闭？')

          .then(_ => {// eslint-disable-line
            done();
          })
          .catch(_ => {});// eslint-disable-line
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'base',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.base
          this.useId=useId
        }
      })
    },
    //记录用户在选择哪个基础信息类型
    baseType(doe) {
      this.baseTypeUse=doe
      if (this.baseTypeUse===1){
        //可以修改用户的权限信息，并且添加用户
        this.baseUser=[]
        this.$request.post('queryAllUser').then(result1=>{
          if (result1.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            this.baseUser=[]
            this.baseUser=result1.data
          }
        })
      }
      else if (this.baseTypeUse===2){
        this.baseComponent=[]
        //向后端发送请求，重新查询所有的列表
        this.$request.post('queryAllBaseComponent').then(result1=>{
          if (result1.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            this.baseComponent=[]
            this.baseComponent=result1.data
          }
        })
      }
    },
    insertType(doe){
      //如果是1，说明是点击了插入命令
      if (doe===1){
        if (this.baseTypeUse===1){
          //现在做的是对用户基础权限的编辑
          // 准备数据
          const temp={
            //记录用户数据表中的用户工号
            userName: '请输入',
            //记录用户的密码
            password: '123456',
            //记录用户姓名
            name: '请输入',
            //记录质量问题管理页的权限
            problemManagement: 100,
            //记录防错管理页的权限
            pokayoke: 100,
            //记录设备维保管理页面权限
            equipmentMaintain: 100,
            //记录编辑基础信息页面的权限
            base: 100,
          }
          //向后端发送请求
          this.$request.post('insertBaseUser',temp).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              //向后端发送请求，重新查询所有的列表
              this.$request.post('queryAllUser').then(result1=>{
                if (result1.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.baseUser=[]
                  this.baseUser=result1.data
                }
              })
            }
          })
        }
        else if (this.baseTypeUse===2){
          //现在做的是对零部件的插入命令
          // 准备数据
          const temp={
                //零部件图号
                partNumber:'请输入',
              //零部件名称
              partName:'请输入',
              //适用机型
              partModel:'请输入',
              //记录供应商名称
              supplier:'请输入',
          }
          //向后端发送请求
          this.$request.post('insertBaseComponent',temp).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              //向后端发送请求，重新查询所有的列表
              this.$request.post('queryAllBaseComponent').then(result2=>{
                if (result2.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.baseComponent=[]
                  this.baseComponent=result2.data
                }
              })
            }
          })
        }
      }
    },
    editType(doe,scope){
      //执行编辑操作，打开弹窗前的准备
      if (doe===1){
        if (this.baseTypeUse===1){
          //相关点击的参数需要记录，先清零，再赋值
          this.tempEdit={}
          this.tempEdit=_.cloneDeep(scope.row)
          this.dataId=''
          this.dataId=scope.row.id
          this.dataIndex=''
          this.dataIndex=scope.$index

          this.tempEdit={}
          this.tempEdit=_.cloneDeep(scope.row)
          //数据赋值
          this.titleMessage='您修改的是基础权限管理'
          this.input1=this.tempEdit.userName
          this.input2=this.tempEdit.password
          this.input3=this.tempEdit.name
          this.input4=this.tempEdit.base
          this.input5=this.tempEdit.pokayoke
          this.input6=this.tempEdit.equipmentMaintain
          this.input7=this.tempEdit.problemManagement
          this.input8=this.tempEdit.changeModel
          this.dialogBaseUser=true
        }
        else if (this.baseTypeUse===2){
          //对零部件的表进行编辑操作
          //相关点击的参数需要记录，先清零，再赋值
          this.tempEdit={}
          this.tempEdit=_.cloneDeep(scope.row)
          this.dataId=''
          this.dataId=scope.row.id
          this.dataIndex=''
          this.dataIndex=scope.$index
          //相应的参数进行设置
          this.titleMessage='编辑零部件信息'
          this.input1=this.tempEdit.partNumber
          this.input2=this.tempEdit.partName
          this.input3=this.tempEdit.partModel
          this.input4=this.tempEdit.supplier
          this.dialogBaseComponent=true
        }
      }
    },
    submitType(){
      if (this.baseTypeUse===1){
        //编辑的是基础的权限信息
        //组合相关的参数
        this.tempEdit.userName=this.input1
        this.tempEdit.password=this.input2
        this.tempEdit.name=this.input3
        this.tempEdit.base=this.input4
        this.tempEdit.pokayoke=this.input5
        this.tempEdit.equipmentMaintain=this.input6
        this.tempEdit.problemManagement=this.input7
        this.tempEdit.changeModel=this.input8
        //向后端发送请求，进行保存
        this.$request.post('editBaseUser',this.tempEdit).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新总表数据
            this.baseUser[this.dataIndex]=_.cloneDeep(this.tempEdit)
            this.baseUser.splice(this.dataIndex, 1, this.tempEdit);
            this.dialogBaseUser=false
          }
        })
      }
      if (this.baseTypeUse===2){
        //编辑的是零部件的基础信息
        //给相关参数赋值
        this.tempEdit.partNumber=this.input1
        this.tempEdit.partName=this.input2
        this.tempEdit.partModel=this.input3
        this.tempEdit.supplier=this.input4
        //向后端发送请求，进行保存
        this.$request.post('editBaseComponent',this.tempEdit).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新总表数据
            this.baseComponent[this.dataIndex]=_.cloneDeep(this.tempEdit)
            this.baseComponent.splice(this.dataIndex, 1, this.tempEdit);
            this.dialogBaseComponent=false
          }
        })
      }
    },
  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>